<template>
  <div>
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="姓名">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="电话">
        <el-input v-model="form.mobile"></el-input>
      </el-form-item>

      <el-form-item label="到达地">
        <el-radio-group v-model="form.city">
          <el-radio label="昌平"></el-radio>
          <el-radio label="西安"></el-radio>
          <el-radio label="海淀"></el-radio>
          <el-radio label="无"></el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="add">立即创建</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: "",
        mobile: "",
        city: "",
      },
    };
  },
  methods: {
    add() {
      // this.$emit("add", this.form);

      //因为设置到深拷贝浅拷贝的问题 如果直接传form 一个变了都会变 可以有两种方法解决
      // 一种是用JSON.parse(JSON.stringify转化成一个新的对象
      // 第二种就是直接造一个新的对象传过去
      // this.$emit("add", JSON.parse(JSON.stringify(this.form)));
      this.$emit("add", {
        name: this.form.name,
        mobile: this.form.mobile,
        city: this.form.city,
        time: new Date().toLocaleString(),
      });

      this.form.name = "";
      this.form.mobile = "";
      this.form.city = "";
      //置空
    },
    //调用父组件的事件
  },
  created() {},
  mounted() {},
  components: {},
  computed: {},
  watch: {},
};
</script>

<style lang="scss" scoped></style>
